<template>
  <div>
    <el-dialog
      :title="'添加'+isManyOnly"
      :visible.sync="addFormVisible"
      width="50%"
      @close="addFormClose"
    >
      <el-form :model="addFormData" :rules="addFormRules" ref="addFormRef" label-width="80px">
        <el-form-item :label="isManyOnly" prop="attr_name" size="small">
          <el-input v-model.trim="addFormData.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 父组件通过计算属性传过来的1、标题名称 用字符串拼接到title上、2、当前第三级商品分类id 3、动态参数和静态属性的值是many还是only
  props: ["isManyOnly","threeCateId","activeName"],

  data() {
    return {
      addFormVisible: false,
      // 参数数据
      addFormData: {
        attr_name:''
      },
      // 验证规则
      addFormRules: {
        attr_name: [
           { required: true, message: "请输入参数或属性名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 显示弹出框
    showDialog() {
      this.addFormVisible = true;
    },
    // 监听新增用户的关闭事件重置表单
    addFormClose() {
      this.$refs.addFormRef.resetFields();
      this.addFormVisible = false;
    },
    // 提交预验证
    submitForm(){
      this.$refs.addFormRef.validate((valid)=>{
        if(valid){
          this.$axios.post(`categories/${this.threeCateId}/attributes`,{
            attr_name:this.addFormData.attr_name,
            attr_sel:this.activeName
          })
          .then((res)=>{
             if(res.data.meta.status=201){
                this.$message.success("添加成功")
                this.$emit('refreshData',true)
             }else{
                this.$message.error("添加失败")
                return
             }
             this.addFormVisible = false;
          }).catch((error) => {
             console.log(error);//cathch用于处理错误事件
          })
          
        }else{
          this.$message.error("预验证失败")
          return
        }
      })
    }
  },
};
</script>
 
<style scoped>
</style>